<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <script>

        let data = {
            name: '哈哈哈',
            school: '你好'
        }

        //创建监视实例对象,用于监视data的属性变化\
        const obj = new Observe(data);
        console.log(obj);

        let vm = {};
        vm._data = data = obj;

        function Observe(obj) {
            //汇总对象所有属性形成一个数组
            const keys = Object.keys(obj);



            //遍历
            keys.forEach((k) => {
                Object.defineProperty(this, k, {
                    get() {
                        return obj[k]
                    },
                    set(val) {
                        console.log(`${k}被修改了`);
                        obj[k] = val;
                    }
                })
            })
        }
    </script>

</body>

</html>